const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// css文件处理为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// css文件压缩处理
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
    mode:'development',
    entry:'./src/index.js',
    output:{
        filename:'build.js',
        path:resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // 解析成功的样式文件以行内(style)样式插入
                    // 'style-loader',
                    // 提取js解析成功的样式文件,处理为单独文件
                    MiniCssExtractPlugin.loader,
                    // 将样式文件以js整合解析
                    'css-loader',
                    // 根据package.json中的browserslist兼容浏览器配置，对做解析css兼容处理
                    /**
                     * css兼容处理
                     * 
                     * 依赖插件和配置文件
                     *      插件：postcss-loader postcss-preset-env
                     *      
                     *      兼容浏览器配置(详细配置查阅
                     *                  https://www.npmjs.com/package/browserslist
                     *                  https://github.com/browserslist/browserslist
                     *                  )
                     * 打包环境，默认为生成环境。通过node环境变量切换环境 process.env.NODE_ENV = development
                     *      "browserslist":{
                     *          开发环境浏览器兼容
                     *          "development":[ 
                     *              "last 1 chrome version",//兼容最近一个谷歌浏览器
                     *              "last 1 firefox version",
                     *              "last 1 safari version"
                     *          ],
                     *          "production":[
                     *              ">0.1%",
                     *              "not dead",
                     *              "not op_mini all",
                     *              "not ie <= 8"
                     *          ]
                     *      }
                     *      last 1 version : 即支持各类浏览器最近的一个版本，当然这里的 1 是可变的数字。
                     *      1% : 支持市场份额大于 1% 的浏览器。
                     *      not dead: 这个 query 中 not 是逻辑非操作符，即对 dead取反，而浏览器被认为是 dead 条件是：最新的两个版本中发现其市场份额已经低于 0.5% 并且 24 个月内没有任务官方支持和更新了。
                     */
                    {
                        loader:'postcss-loader',
                        options:{
                            'postcssOptions':{
                                plugins:['postcss-preset-env']
                            }
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            // 输出文件路径和名称
            filename:'css/[name].css'
        }),
        // css压缩
        new CssMinimizerWebpackPlugin()
    ],
    devServer:{
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 3000,
        // 自动打开浏览器
        open: true,
    }
}